<!-- 货品信息修改界面 -->
<template>
    <!--基本信息-->
    <div class="white-container">
        <h3 style="text-align: left;margin-left: 20px;padding-top: 20px;">基础信息</h3>
        <hr style="border:1px solid #ccd0d4;"/>
        <el-form :model="procform" ref="procref" :rules="rules" style="margin-top: 20px;margin-left: 50px;" label-width="auto">
            <el-row>
                <el-col :span="20">
                    <el-form-item label="货品名称" prop="name">
                        <el-input placeholder="请输入" v-model="procform.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="货品编号" prop="code">
                        <el-input placeholder="自动获取" style="width: 300px;" v-model="procform.code" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="货品类型" prop="typeid">
                        <el-tree-select v-model="procform.typeid" :data="types"
                            :props="{
                                value: 'type_id',
                                label: 'type_name',
                                children: 'children'
                            }"
                            placeholder="请选择"
                            style="width: 300px"
                            check-strictly
                            default-expand-all
                            @change="handleDictTypeChange"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="规格型号" prop="model">
                        <el-input placeholder="请输入" style="width: 300px;" v-model="procform.model"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="显示顺序" prop="sort">
                        <el-input placeholder="请输入" style="width: 300px;" v-model="procform.sort"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="入库参考价/元" prop="inprice">
                        <el-input placeholder="请输入" style="width: 300px;" v-model="procform.inprice"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="出库参考价/元" prop="outprice">
                        <el-input placeholder="请输入" style="width: 300px;" v-model="procform.outprice"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="库存上限值" prop="procmax">
                        <el-input placeholder="请输入" style="width: 300px;" v-model="procform.procmax"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="库存下限值" prop="procmin">
                        <el-input placeholder="请输入" style="width: 300px;" v-model="procform.procmin"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="procform.status">
                            <el-radio value="0">启用</el-radio>
                            <el-radio value="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="保质期管理" prop="is_datamanagement">
                        <el-checkbox label="开启" v-model="procform.is_datamanagement" @change="handledatamanagementChange"></el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="isdatamanagement">
                <el-col :span="11">
                    <el-form-item label="保质期" prop="expirationdate">
                        <el-input  placeholder="请输入" style="width: 180px;" v-model="procform.expirationdate"></el-input>
                        <el-select  placeholder="请选择" style="width: 100px;padding-left: 20px;" v-model="procform.day">
                            <el-option value="天">天</el-option>
                            <el-option value="个月">月</el-option>
                            <el-option value="年">年</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="预警天数(天)" prop="warningdays">
                        <el-input style="width: 300px;" v-model="procform.warningdays"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="20">
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" placeholder="请输入" v-model="procform.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>


     <!--单位管理-->
     <div class="white-container">
        <h3 style="text-align: left;margin-left: 20px;padding-top: 20px;">单位管理</h3>
        <hr style="border:1px solid #ccd0d4;"/>
        <el-form :model="unitform" ref="unitcref" :rules="rules"  style="margin-top: 20px;margin-left: 50px;" label-width="auto">
            <el-row>
                <el-col>
                    <el-form-item>
                        <el-checkbox v-model="unitform.is_enableMultiUnit" label="启用多单位" @change="handleenableMultiUnitChange"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--主单位-->
            <el-row>
                <el-col :span="7">
                    <el-form-item label="主单位" prop="unit">
                        <el-select placeholder="请选择" v-model="unitform.unit" style="width:200px">
                            <el-option v-for="item in units" :key="item.dict_label" :label="item.dict_label" :value="item.dict_label"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="barcode">
                        <el-input placeholder="请输入" style="width: 300px;" v-model="unitform.barcode">
                            <template #append>
                                <span style="color: #666;" @click="generateMainBarcode">生成条码</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--辅助单位-->
            <el-row v-if="isenableMultiUnit">
                <el-col :span="24">
                    <div v-for="(unit, index) in auxiliaryUnits" :key="index">
                        <el-row :gutter="20">
                            <el-col :span="7">
                                <el-form-item label="辅助单位">
                                    <el-select placeholder="请选择" v-model="unit.unit" style="width:200px">
                                        <el-option v-for="item in units" :key="item.dict_label" :label="item.dict_label" :value="item.dict_label"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <el-input placeholder="请输入" v-model="unit.num" style="width: 200px;">
                                        <template #append>
                                            <span style="color: #666;">{{ unit.unit }}</span>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item>
                                    <el-input placeholder="请输入" v-model="unit.barcode" style="width: 300px;">
                                        <template #append>
                                            <span style="color: #666;" @click="generateAuxBarcode(index)">生成条码</span>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-button icon="Plus" @click="addAuxiliaryUnit"></el-button>
                                <el-button icon="Minus" @click="removeAuxiliaryUnit(index)" :disabled="auxiliaryUnits.length === 1"></el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>


     <!--上传图片-->
     <div class="white-container">
        <h3 style="text-align: left;margin-left: 20px;padding-top: 20px;">上传图片</h3>
        <hr style="border:1px solid #ccd0d4;"/>
        <el-upload
            :file-list="imglist" 
            action="http://localhost:5194/api/ProductImg/UploadImg"
            list-type="picture-card"
            multiple  
            name="files"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleImgRemove"
            :on-success="handleSuccess"
            :on-error="handleError"
            :auto-upload="true"
            :before-upload="beforeUpload"
            :headers="headers"
            style="text-align: left;margin-left: 20px;">
            <el-icon><Plus /></el-icon>
        </el-upload>
    </div>


      <!--上传附件-->
      <div class="white-container">
        <h3 style="text-align: left;margin-left: 20px;padding-top: 20px;">上传附件</h3>
        <hr style="border:1px solid #ccd0d4;"/>
        <el-upload
            :file-list="filelist" 
            class="upload-demo"
            action="http://localhost:5194/api/PublicFile/Uploadfile"
            multiple
            name="files"
            :on-preview="handlePreview"
            :on-remove="handleFileRemove"
            :limit="3"
            :on-exceed="handleExceed"
            :on-success="handleFileSuccess"
            :headers="headers"
            style="text-align: left;margin-left: 20px;">
            <el-button type="primary">上传附件</el-button>
                <template #tip>
                    <div class="el-upload__tip">
                        您可以上传doc, pdf, rar等格式的文件，单个文件上传最大200MB。
                    </div>
                </template>
        </el-upload>
    </div>


    <!-- 底部操作栏 -->
    <div class="action-bar">
        <el-button @click="Close">关闭</el-button>
        <el-button type="primary" @click="OK">保存</el-button>
    </div>
</template>
  
<script>
import {ref,reactive,onMounted} from 'vue';
import http from '../auth/index';
import { ElMessage,ElMessageBox } from 'element-plus'; //提示信息
import { useRoute,useRouter  } from 'vue-router';//路由
export default {
    setup(){

        const route = useRoute();//路由（获取参数）
        const router = useRouter();//路由（实现跳转）
        //货品传过来的ID与编号
        const productid = route.params.productid;
        const productcode=route.params.productcode;
        //当前用户信息
        const user = JSON.parse(sessionStorage.getItem("user"));

        //查询所有货品类型绑定到下拉框
        const types=ref([]);
        function AllType(){
            http.get("/ProductType/GetAllProductTypes")
            .then(res=>{
                types.value=convertToTree(res.data);
            }).catch(err=>{
                console.log(err);
            })
        }

        // 将扁平数据转换为树状结构的函数，同时保留所有相关节点及其父节点
        function convertToTree(data) {
            // 先创建一个以 type_id 为键的映射表，方便快速查找节点
            const map = {};
            data.forEach(item => {
                map[item.type_id] = { ...item, children: [] };
            });
            const tree = [];
            data.forEach(item => {
                const node = map[item.type_id];
                if (item.type_pid === 0) {
                    // 如果是顶层节点，直接添加到树中
                    tree.push(node);
                } else {
                    const parent = map[item.type_pid];
                    if (parent) {
                        // 如果父节点存在，将当前节点添加到父节点的 children 中
                        parent.children.push(node);
                    } else {
                        // 如果父节点不存在，将其作为顶层节点添加到树中
                        tree.push(node);
                    }
                }
            });
            return tree;
        }

        // 处理货品类型选择变化,将类型名称赋值
        function handleDictTypeChange(value) {
            const findNode = (nodes, value) => {
                for (const node of nodes) {
                if (node.type_id === value) {
                    return node;
                }
                if (node.children) {
                    const found = findNode(node.children, value);
                    if (found) return found;
                }
                }
                return null;
            };
            const selectedItem = findNode(types.value, value);
            if (selectedItem) {
                procform.typename = selectedItem.type_name;
            }
        }

        //查询所有单位
        const units=ref([]);
        function Getunit(){
            http.get("/DictData/GetAllDictDataBytype?typeid=8")
            .then(res=>{
                units.value=res.data;
            }).catch(err=>{
                console.log(err);
            })
        }

        //货品表单
        const procref=ref("");
        const procform=reactive({
            id:"",
            code:"",
            name:"",
            typeid:"",
            typename:"",
            model:"",
            inprice:"",
            outprice:"",
            procmax:"",
            procmin:"",
            sort:"",
            status:"0",
            is_datamanagement:false,
            expirationdate:"",
            warningdays:0,
            remark:"",
            day:""//保质期后单位
        })

        //是否显示保质期管理
        const isdatamanagement=ref(false);
        function handledatamanagementChange(checked){
            if(checked){
                isdatamanagement.value=true;
            }else{
                isdatamanagement.value=false;
            }
        }


        //单位表单
        const unitcref=ref("");
        const unitform=reactive({
            is_enableMultiUnit:false,
            unit:"",
            barcode:"",
        })


        // 辅助单位数据
        const auxiliaryUnits = ref([
            {
                unit: '',
                num: '',
                barcode: ''
            }
        ]);

        //是否开启多单位
        const isenableMultiUnit=ref(false);
        function handleenableMultiUnitChange(checked){
            if(checked){
                isenableMultiUnit.value=true;
                // 如果当前没有辅助单位，自动补充一行空的
                if (!auxiliaryUnits.value.length) {
                    auxiliaryUnits.value = [{ unit: '', num: '', barcode: '' }];
                }
            }else{
                isenableMultiUnit.value=false;
            }
        }


         //规则验证
         const rules = reactive({
            name: [
                { required: true, message: '请输入货品名称', trigger: 'blur' },
            ],
            typeid: [
                { required: true, message: '请选择', trigger: 'blur' },
            ],
            sort: [
                { required: true, message: '请输入显示顺序', trigger: 'blur' },
                { pattern: /^\d+$/, message: '只能是数字', trigger: 'blur' }
            ],
            inprice: [
                { required: true, message: '请输入进价', trigger: 'blur' },
                { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字(支持小数)', trigger: 'blur' }
            ],  
            outprice: [
                { required: true, message: '请输入售价', trigger: 'blur' },
                { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字(支持小数)', trigger: 'blur' }
            ],
            unit:[
                { required: true, message: '请选择', trigger: 'blur' },
            ],
            procmax: [
                { required: true, message: '请输入最大库存量', trigger: 'blur' },
                { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字', trigger: 'blur' }
            ],
            procmin: [
                { required: true, message: '请输入最小库存量', trigger: 'blur' },
                { pattern: /^\d+(\.\d+)?$/, message: '请输入有效的数字', trigger: 'blur' }
            ],
        });


        // 添加辅助单位行
        function addAuxiliaryUnit(){
            auxiliaryUnits.value.push({});
        };

        // 删除辅助单位行
        function removeAuxiliaryUnit(index){
            if (auxiliaryUnits.value.length > 1) {
                auxiliaryUnits.value.splice(index, 1);
            }
        };

        //生成主单位条码
        function generateMainBarcode(){
            if (!unitform.unit) {
                ElMessage.warning('请先选择单位');
                return;
            }
            unitform.barcode = `${Date.now().toString().slice(-6)}`;
        }
        //生成辅助单位条码
        function generateAuxBarcode(index){
            const unit = auxiliaryUnits.value[index];
            if (!unit.unit) {
                ElMessage.warning('请先选择单位');
                return;
            }
            unit.barcode = `${Date.now().toString().slice(-6)}`;
        }

        //日期转换格式
        function formatDateTime(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }

        //#region 上传图片
        const imglist = ref([])
         //头部带token
        const token=sessionStorage.getItem('token');
        const headers = {
             Authorization: `Bearer ${token}`, // 添加 token 到请求头
        };
        // 上传前验证方法
        function beforeUpload(file) {
            // 定义允许的图片格式
            const allowedFormats = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'];
            const isImage = allowedFormats.includes(file.type);
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isImage) {
                ElMessage.error('仅支持 JPEG、PNG、GIF、BMP 格式的图片文件!');
            }
            if (!isLt2M) {
                ElMessage.error('图片大小不能超过 2MB!');
            }
            return isImage && isLt2M;
        }

        // 上传成功回调方法
        function handleSuccess(response, file, fileList) {
            if (Array.isArray(response)) {
                // 创建 { 文件名: URL } 的映射
                const urlMap = response.reduce((map, res) => {
                    if (res.success) map[res.originalName] = res.path;
                    return map;
                }, {});
                
                // 更新文件列表
                imglist.value = fileList.map(item => ({
                    ...item,
                    url: urlMap[item.name] || item.url,  // 优先使用新URL
                    status: urlMap[item.name] ? 'success' : item.status
                }));
            }
        }

        //删除图片
        function handleImgRemove(file, fileList) {
            imglist.value = fileList;
        }
        //#endregion
        
        //#region 上传附件
        const filelist = ref([])
        // 上传成功回调方法
        function handleFileSuccess(response, file, fileList) {
            if (Array.isArray(response)) {
                // 创建 { 文件名: URL } 的映射
                const urlMap = response.reduce((map, res) => {
                    if (res.success) map[res.originalName] = res.path;
                    return map;
                }, {});
                
                // 更新文件列表
                filelist.value = fileList.map(item => ({
                    ...item,
                    url: urlMap[item.name] || item.url,  // 优先使用新URL
                    status: urlMap[item.name] ? 'success' : item.status,
                    originalName: item.originalName || item.name
                }));
            }
        }
        //预览
        function handlePreview(file) {
            if (!file.url) {
                ElMessage.error('文件URL不存在，请重新上传');
                return;
            }
            
            // 安全获取文件名（从url中提取或使用默认值）
            const fileName = file.name || file.url.split('/').pop() || 'file';
            const ext = fileName.split('.').pop().toLowerCase();
            
            switch (ext) {
                case 'jpg': case 'jpeg': case 'png': case 'gif': case 'bmp':
                case 'pdf':
                case 'doc': case 'docx': case 'xls': case 'xlsx': case 'ppt': case 'pptx':
                window.open(file.url, '_blank');
                break;
                default:
                // 下载其他格式文件
                const link = document.createElement('a');
                link.href = file.url;
                link.download = fileName;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }

        //删除附件
        function handleFileRemove(file, fileList) {
            filelist.value = fileList;
        }
        //#endregion


        //#region 查询对应信息
        function Select(){
            //查询货品信息
            http.get("/Product/GetProductById?id="+productid)
            .then(res=>{
                procform.code=res.data.proc_code,
                procform.name=res.data.proc_name,
                procform.typeid=res.data.type_id,
                procform.typename=res.data.type_name,
                procform.model=res.data.proc_model,
                procform.inprice=res.data.instock_price,
                procform.procmax=res.data.proc_max,
                procform.procmin=res.data.proc_min,
                procform.outprice=res.data.outstock_price,
                procform.procmax=res.data.proc_max,
                procform.procmin=res.data.proc_min,
                procform.sort=res.data.proc_sort,
                procform.status=res.data.proc_status.toString(),
                procform.is_datamanagement=res.data.is_datamanagement===1? true : false,
                isdatamanagement.value = procform.is_datamanagement; // 保持同步
                if (res.data.proc_expirationdate) {
                    const matches = res.data.proc_expirationdate.match(/^(\d+)(天|个月|年)$/);
                    if (matches) {
                        procform.expirationdate = matches[1]; // 数字部分
                        procform.day = matches[2];            // 单位部分
                    }
                }
                procform.warningdays=res.data.proc_Warningdays,
                procform.remark=res.data.remark,
                unitform.unit=res.data.proc_primary_unit,
                unitform.barcode=res.data.proc_primary_barcode
            })

            //查询货品图片
            http.get("/ProductImg/GetImgByPId?procid="+productid)
            .then(res=>{
                imglist.value=res.data.map(item=>{
                    return {
                        url:item.proc_img
                    }
                })
            })
            
            //查询货品附件
            http.get("/PublicFile/GetPublicFileBy?type=货品&code="+productcode)
            .then(res=>{
                console.log(res.data)
                filelist.value=res.data.map(item=>{
                    return {
                        name: item.title,
                        url:item.file_name,
                        originalName:item.title
                        
                    }
                })
            })

            //查询辅助单位
            http.get("/ProductUnit/GetUnitByPid?procid=" + productid)
            .then(res => {
                auxiliaryUnits.value = res.data.map(item => ({
                    unit: item.proc_auxiliary_unit,
                    barcode: item.proc_auxiliary_barcode,
                    num: item.proc_auxiliary_num
                }));
                    const hasAux = auxiliaryUnits.value.length > 0;
                    unitform.is_enableMultiUnit = hasAux;
                    isenableMultiUnit.value = hasAux;
            })
        }
        //#endregion

        //#region 修改
        async function Update() {
            try {
                // 1. 验证表单
                const [procValid, unitValid] = await Promise.all([
                    new Promise(resolve => procref.value.validate(resolve)),
                    new Promise(resolve => unitcref.value.validate(resolve))
                ]);
                if (!procValid || !unitValid) {
                    return false;
                }

                //2.修改数据
                const updateData = {
                    proc_id: productid,
                    proc_code: procform.code,
                    proc_name: procform.name,
                    type_id: procform.typeid,
                    type_name: procform.typename,
                    proc_model: procform.model,
                    instock_price: procform.inprice,
                    outstock_price: procform.outprice,
                    proc_max: procform.procmax,
                    proc_min: procform.procmin,
                    proc_sort: procform.sort,
                    proc_status: procform.status,
                    is_datamanagement: procform.is_datamanagement===false? 0 : 1,
                    proc_expirationdate: procform.expirationdate+procform.day,
                    proc_Warningdays: procform.warningdays,
                    proc_primary_unit: unitform.unit,
                    proc_primary_barcode: unitform.barcode,
                    remark: procform.remark,
                    update_name: user.name,
                    update_time: formatDateTime(new Date()),
                }

                //3.修改信息添加
                await http.put("/Product/UpdateProduct", updateData);

                // 4. 修改图片和附件,辅助单位
                const uploadPromises = []; // 先创建空数组
                // 只有图片列表有数据时才添加请求
                if (imglist.value.length > 0) {
                    imglist.value.forEach(file => {
                        uploadPromises.push( // 用 push 把每个请求的 Promise 加入数组
                            http.post("/ProductImg/UpdateImg?procid=" + productid + "&img=" + file.url)
                        );
                    });
                }
                // 只有附件列表有数据时才添加请求
                await http.delete("/PublicFile/DeleteFile?type=货品&code=" + productcode);
                if (filelist.value.length > 0) {
                    filelist.value.forEach(file => {
                        uploadPromises.push(
                            http.post("/PublicFile/AddFile?type=货品&code=" + productcode + "&file=" + file.url+"&title="+file.originalName)
                        );
                    });
                }

                if(auxiliaryUnits.value.length>0){
                    // 过滤有效数据
                    const validUnits = auxiliaryUnits.value.filter(
                        res => res.unit && res.barcode && res.num
                    );
                    validUnits.forEach(res => {
                        uploadPromises.push(
                            http.post("/ProductUnit/UpdateUnit?procid="+productid+"&unit="+res.unit+"&barcode="+res.barcode+"&num="+res.num)
                        );
                    });
                }

                // 只有确实有需要上传的内容时才执行 Promise.all
                if (uploadPromises.length > 0) {
                    await Promise.all(uploadPromises);
                }

                //全部执行完毕
                ElMessage.success('修改成功');
                return true;
            } catch (err) {
                console.log(err);
            }
        } 
        //#endregion

        //保存
        async function OK() {
            const result = await Update();
            if (result) {
                // 只有添加成功才跳转
                router.push("../../product");
            }
        }
        //关闭
        function Close(){
            router.back();
        }

        //挂载
        onMounted(() => {
            AllType();
            Getunit();
            Select();
        });

        return{
            procform,
            procref,
            isdatamanagement,
            unitcref,
            unitform,
            handledatamanagementChange,
            handleenableMultiUnitChange,
            isenableMultiUnit,
            auxiliaryUnits,
            addAuxiliaryUnit,
            removeAuxiliaryUnit,
            rules,
            types,
            units,
            handleDictTypeChange,
            generateMainBarcode,
            generateAuxBarcode,
            handleSuccess,
            imglist,
            headers,
            beforeUpload,
            handleSuccess,
            handleFileSuccess,
            filelist,
            handlePreview,
            Update,
            formatDateTime,
            OK,
            Close,
            handleFileRemove,
            handleImgRemove
        }
    }
}
</script>
  
<style scoped>
    /* 白色圆角容器 - 核心样式 */
    .white-container {
        background: white;
        border-radius: 12px;
        margin-bottom: 50px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        width: 75%;
    }

    /* 底部操作栏自适应 */
    .action-bar {
        position: fixed;
        bottom: 0;
        right: 0.5%; /* 与表单右侧对齐 */
        left: 210px; /* 与菜单栏宽度一致 */
        background: white;
        border-top: 1px solid #e6e6e6;
        padding: 15px;
        text-align: right;
    }
</style>